import React from 'react';
import {base} from 'nc-lightapp-front';
import './index.less';

const {NCTabs, NCCheckbox} = base;
const {NCTabPane} = NCTabs;

export default class Table extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tableHeight: ''
        };
    }

    componentDidMount() {
        this.setTableHeight();
    }

    setTableHeight = () => {
        const mainTable = document.querySelector('.psn-author');
        if (mainTable) {
            this.setState({
                tableHeight: mainTable.clientHeight - 201
            });
        }
    };

    render() {
        const {editTable, tableAfterEdit, tabChange, main, changeApprove} = this.props;
        const {language, tabKey, isEdit, handleItem, approveMap} = main;
        return (
            <div className="main-table">
                <div className="tab-definInfo-area">
                    <NCTabs activeKey={tabKey} onChange={tabChange} defaultActiveKey="entry">
                        <NCTabPane
                            key="entry"
                            tab={language['gx6008-000241']} //国际化处理： 在职人员
                        />
                        <NCTabPane
                            key="unentry"
                            tab={language['gx6008-000242']} //国际化处理： 未在职人员
                        />
                        <NCTabPane
                            key="manager"
                            tab={language['gx6008-000243']} //国际化处理： 我的团队
                        />
                    </NCTabs>
                </div>
                <div>
                    <span className="infoset-title">{handleItem.infosetname}</span>
                    <If condition={tabKey === 'entry' && !!approveMap[handleItem.pk_infoset]}>
                        <span className="infoset-title-check" style={{display: 'inline-block'}}>
                            <NCCheckbox disabled={!isEdit}
                                        checked={approveMap[handleItem.pk_infoset] === 'Y'}
                                        onChange={changeApprove}
                            />
                            <span>{language['gx6008-000269']} </span>
                        </span>
                    </If>
                    <div className="nc-bill-table-area">
                        {editTable.createEditTable('appconfgrid', {
                            height: this.state.tableHeight,
                            onAfterEvent: tableAfterEdit,
                            autoAffixScroll: false
                        })}
                    </div>
                </div>
            </div>
        );
    }
}